<template>
  <m-window-frame
    :title="$t('日期和时间设置')"
    style="height: 100%"
    :okLoading="saveLoading"
    class="v-data-and-time-setting-window"
    @cancel="handleCancel"
    @ok="handleSave"
  >
    <div class="v-data-and-time-setting-container">
      <DateAndTimeSetting
        :defaultDate="defaultDate"
        :show-time-line="false"
        @stepValueChange="stepValueChange"
      ></DateAndTimeSetting>
    </div>
  </m-window-frame>
</template>
<script lang="ts" setup>
import MWindowFrame from "@/common/ipcWindow/WindowFrame.vue";
import { ref, watch } from "vue";
import { Params, CloseData } from "./index";
import { useRoute } from "vue-router";
import { ipcWindowUtil } from "@/mdesign-lib/mdesign-app.umd.js";
import DateAndTimeSetting from "../dateAndTimeSettingWindow/DateAndTimeSetting.vue";

interface Result {
  timeLine?: string;
  date?: string;
}

const saveLoading = ref(false);

const result: Result = {};

let defaultDate = "";

const route = useRoute();
watch(
  () => route.fullPath,
  () => {
    const routeQuery = route.query as unknown;
    const query = routeQuery as Params;

    defaultDate = query.date || "";
  },
  { immediate: true }
);

const stepValueChange = (val: any, path: string[]) => {
  console.log("val", val);
  result[path[0]] = val;
};

const handleSave = async () => {
  saveLoading.value = true;
  ipcWindowUtil.sendWindowChange({ success: true, result });
};

function handleclose(data: CloseData) {
  saveLoading.value = false;
  ipcWindowUtil.closeWindow(data);
}
function handleCancel() {
  handleclose({ success: false });
}
</script>
<style lang="scss">
.v-data-and-time-setting-window {
  .v-data-and-time-setting-container {
    padding: 10px;
    height: 100%;
  }
  .el-dropdown {
    height: 22px;
  }
}
</style>
